<template>
  <el-container style="background-color:#f0f3f4">
    <el-header style="60px;background-color:#ffff" v-show="isShowBtn==1">
      <tool-bar></tool-bar>
    </el-header>
    <el-main justify="center" align="middle">
      <!--主要区域容器-->
      <el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
        傻瓜表单
      </el-form>
      <el-form v-else-if="node.FormType===1" id="FrmFree">
        自由表单
      </el-form>
      <el-form v-else-if="node.FormType===5">
        树形表单
      </el-form>
      <el-form v-if="node.FormType===12" id="FrmDevelop" v-html="developHtml" :style="{width:widthStyle}"
               style="background-color:#ffff;margin:0px auto;padding:5px 10px">
        开发者表单
        {{ developHtml }}
      </el-form>
      <div id="divinfo" v-show="isShowDiv">
      </div>
      <!--pop弹出框-->
      <el-dialog
          :title="Poptitle"
          :visible.sync="popVisible"
          :width="popWidth"
          height="80%"
          :before-close="handleClose">
        <popbranchesandleaf ref="popbranchesandleaf" v-if="PopOperation == 'PopBranchesAndLeaf'"
                            v-bind:proParams="popParams"></popbranchesandleaf>
      </el-dialog>

    </el-main>

  </el-container>


</template>
<style src="../datetimepicker/css/bootstrap-datetimepicker.css"></style>
<style src="../datetimepicker/css/bootstrap.css"></style>
<script>
import ToolBar from "./components/tool-bar.vue";
import {ParseDevelopFrm} from '@/api/FrmDevelop.js';
import {LoadFrmDataAndChangeEleStyle, AfterBindEn_DealMapExt} from '@/api/FrmEnd.js';
import popbranchesandleaf from "./ccform/Pop/BranchesAndLeaf.vue";
import {ClosePopFunc} from '@/api/js/Pop.js';


export default {
  data() {
    return {
      width: '900px',
      node: null, //节点信息
      mainData: null,//表单数据
      developHtml: '',
      flowData: null,//表单的所有数据
      isShowDiv: false,
      Poptitle: '',
      popVisible: false,
      popWidth: '50%',
      PopOperation: '',
      popParams: [],
      isShowBtn: 1,
      isReadonly: 1,
      form: {},
      params: {}
    }
  },
  components: {
    ToolBar,
    popbranchesandleaf,

  },
  computed: {
    widthStyle: function () {
      return this.flowData.Sys_MapData[0].FrmW + 'px';
    }
  },
  methods: {
    handleClose: function (done) {
      //获取子组件中数据
      var selectRows = this.$refs.popbranchesandleaf.getvalue();
      //var selectRows=[];
      selectRows.push({"No": "zhanghaicheng", Name: "张海成"});
      if (selectRows.length != 0) {
        //执行相关的操作
        ClosePopFunc(this.popParams, selectRows);
      }
      done();
    },

  },
  created() {
    // 获取myflow.vue 组件数据
    // console.log("--获取数据--",this.$route.params)
    // this.params = this.$route.params;
    //获取表单数据
    this.$tools.GenerWorkNode(this);

    this.mainData = this.flowData.MainTable[0];
    //初始化按钮
    this.params = this.$store.getters.getData;
    this.isShowBtn = this.params.IsShowBtn;

  },
  mounted() {
    //开发者表单，加载完页面元素后解析页面
    if (this.node.FormType === 12) {
      ParseDevelopFrm(this.$route.params, this.flowData);
    }
    LoadFrmDataAndChangeEleStyle(this.flowData, this.$route.params);

    if (this.node.FormType == 11) {
      //获得配置信息.
      var frmNode = this.flowData["FrmNode"];
      if (frmNode) {
        frmNode = frmNode[0];
        if (frmNode.FrmSln == 1) {
          /*只读的方案.*/
          //alert("把表单设置为只读.");
          this.$tools.SetFrmReadonly();
          //alert('ssssssssssss');
        }

        if (frmNode.FrmSln != 1)
            //处理下拉框级联等扩展信息
          AfterBindEn_DealMapExt(this.flowData, this);
      }
    } else {
      //处理下拉框级联等扩展信息
      AfterBindEn_DealMapExt(this.flowData, this);
    }

    this.$tools.HelpOper(this.node.HelpRole, this.params.FK_Node, this);

  }
}

</script>
<style scoped>

/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
html, body, #app, .el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

.el-header {
  width: 100%;
  height: 56px !important;
  line-height: 56px;
  padding: 0 20px 0 44px;
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
  box-sizing: border-box;
  /**position: fixed;*/
  /**z-index: 0;*/
  top: 0;
}

</style>

